<script setup lang="ts">
import { AddCircle, Expand } from '@vicons/ionicons5';
import type { Key, TreeOption } from '@zi-shui/components/tree/src/tree';
import { ref } from 'vue';

// function createTreeData(level = 4, parentKey = ''): any {
//   if (!level) return [];
//   const arr = new Array(20 - level).fill(0);
//   return arr.map((_, idx: number) => {
//     const key = parentKey + level + idx;
//     return {
//       label: createTreeLabel(level),
//       key,
//       children: createTreeData(level - 1, key)
//     };
//   });
// }

// function createTreeLabel(level: number): string {
//   if (level === 4) return '一级节点';
//   if (level === 3) return '二级节点';
//   if (level === 2) return '三级节点';
//   if (level === 1) return '四级节点';
//   return '';
// }

// function createTreeData(){
//   return [
//     {
//       label: createTreeLabel(),
//       key: 1,
//       isLeaf: false
//     },
//     {
//       label: createTreeLabel(),
//       key: 2,
//       isLeaf: false
//     }
//   ]
// }

// function createTreeLabel(currentLabel?: string | undefined | number): string {
//   if (!currentLabel) return '一级节点'
//   if(currentLabel === '一级节点') return '二级节点'
//   if(currentLabel === '二级节点') return '三级节点'
//   if(currentLabel === '三级节点') return '四级节点'
//   if(currentLabel === '四级节点') return '一级节点'
//   return ''
// }

// const handleLoad = (node: TreeOption) => {
//   return new Promise<TreeOption[]>(resolve => {
//     setTimeout(() => {
//       resolve([
//         // 这个数据将会作为当前展开的node的children属性
//         {
//           label: createTreeLabel(node.label),
//           key: node.key + createTreeLabel(node.label),
//           isLeaf: false
//         }
//       ]);
//     }, 1000);
//   });
// };

const treeData = ref<TreeOption[]>([
  {
    key: '40',
    label: '一级节点',
    children: [
      {
        key: '401',
        label: '二级节点'
      },
      {
        disabled: true,
        key: '402',
        label: '二级节点',
        children: [
          {
            key: '4021',
            label: '三级节点'
          },
          {
            key: '4022',
            label: '三级节点'
          }
        ]
      }
    ]
  },
  {
    key: '41',
    label: '一级节点',
    children: [
      {
        key: '411',
        label: '二级节点'
      },
      {
        key: '412',
        label: '二级节点',
        children: [
          {
            key: '4121',
            label: '三级节点'
          },
          {
            key: '4122',
            label: '三级节点'
          }
        ]
      }
    ]
  }
]);

// const treeData = ref(createTreeData());
const value = ref<Key[]>([]);
const checked = ref(true);
</script>

<template>
  <z-icon
    :color="'red'"
    :size="40"
  >
    <AddCircle></AddCircle>
  </z-icon>
  <div>{{ value }}</div>
  <!--  在使用树组件的时候 会传递一个树形结构-->
  <!-- selectable表示可选择 multiple表示可多选 selected-keys表示选中的节点的key值 -->
  <z-tree
    :data="treeData"
    v-model="value"
    :multiple="true"
    :selectable="true"
    :default-selected-keys="['41']"
  >
    <template #default="{ node }"> {{ node.key }} - {{ node.label }} </template>
  </z-tree>
  <z-checkbox v-model="checked"> 上海 </z-checkbox>
</template>

<style scoped></style>
